<template>
  <div style="position: relative">
    <el-drawer
      v-model="props.carouselDrawer"
      title="品牌推荐"
      :before-close="handleCarouselVisibleClose"
      size="50%"
    >
    <el-button type="primary" @click="addList()" style="margin: 10px 0"
        >新增</el-button
      >
      <el-table :data="tableData" >
        <el-table-column property="image" label="品牌" align="center">
          <template #default="scope">
            <el-select
              style="width: 200px"
              v-model="scope.row.relatedIds"
              placeholder="请选择"
              @change="choseBrand(scope.$index, scope.row)"
              :disabled="scope.row.id"
            >
              <el-option
                v-for="dict in brandList"
                :key="dict.id"
                :label="dict.commonName"
                :value="dict.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="商标" align="center">
          <template #default="scope">
            <ImagePreview
              :src="scope.row.host"
              height="50px"
              width="50px"
            ></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleDone(scope.row)"
              v-if="!scope.row.id"
              >完成</el-button
            >
            <el-button
              link
              type="danger"
              @click="deleteBrand(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

  
    </el-drawer>
  </div>
</template>
  <script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
const emits = defineEmits(["handleCarouselVisibleClose"]);
const { proxy } = getCurrentInstance();
const publicItem = ref({}); //公共赋值对象参数
const tableData = ref([]);
const brandList = ref([]);
const props = defineProps({
  carouselDrawer: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  listItem: {
    type: Object,
    default: {},
  },
  websiteId: {
    type: String || Number, // 网站id
    default: null,
  },
});
const brandFrom = ref({
  pageNum: 1,
  pageSize: 999,
  param: {
    websiteId: Number(props.websiteId),
    moduleId: null, //模块id
  },
});
const dataListFrom = ref({
  pageNum: 1,
  pageSize: 999,
  param: {
    websiteId: Number(props.websiteId),
    moduleId: null,
  },
});

watch(
  () => props.carouselDrawer,
  () => {
    if (!props.carouselDrawer) return;
    getBrandList();
    getList();
  }
);
const getList = () => {
  dataListFrom.value.param.moduleId = props.listItem.id;
  site.moduleline
    .sitewebsitemodulelineList({
      data: dataListFrom.value,
    })
    .then((res) => {
      tableData.value = [];
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            relatedIds: code.relatedId,
          };
        });
      }
      tableData.value = res.data;
    });
};
// 新增
const addList = () => {
  let from = {
    moduleId: props.listItem.id,
    relatedIds: null,
    host: "",
  };
  tableData.value.push(from);
};

// 站点品牌关联表
const getBrandList = () => {
  site.general
    .sitewebsitebrandList({
      data: brandFrom.value,
    })
    .then((res) => {
      brandList.value = res.data;
    });
};
// 选择品牌
const choseBrand = (index, row) => {
  return (row.host = brandList.value.find(
    (e) => e.id === row.relatedIds
  )?.host);
};
//   确定取消
const handleCarouselVisibleClose = () => {
  emits("handleCarouselVisibleClose");
};
const deleteBrand = (index, row) => {
  if (row.id) {
    deleteItem(row);
  } else {
    tableData.value.splice(index, 1);
  }
};
const deleteItem = (row) => {
  var newArray = [];
  proxy.$modal.confirm("是否确认删除此数据项？").then(() => {
    newArray.push(row.id);
    site.moduleline
      .sitewebsitemodulelineDeletebatch({
        data: {
          ids: newArray,
          moduleId: props.listItem.id,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          getBrandList();
          getList();
          proxy.$message.success("删除成功");
        }
      });
  });
};
const handleDone = (rowItem) => {
  if (!rowItem.relatedIds) return proxy.$modal.msgError("请选择品牌");
  var  newRelatedIds= tableData.value .map((item) => item.relatedIds);
  site.moduleline
    .sitewebsitemodulelineUpdaterelatedids({
      data: {
        relatedIds: newRelatedIds,
        moduleId: props.listItem.id,
      },
    })
    .then((res) => {
      if (res.code === 200) {
        getList();
        proxy.$message.success("新增成功");
      }
    });
};
</script>
  <style lang="scss" scoped>
.full-width {
  width: 148px;
}
</style>